<template>
  <div class="box">
    <div class="tabs_box">
      <div
        @click="tabsChang(index, item)"
        class="tabs_box_item"
        :class="{ tabs_box_item_color: current == index }"
        v-for="(item, index) in tabslist"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="table">
      <div class="table_line_box">
        <div
          v-for="(item, index) in rencaixiangmuList"
          :key="index"
          class="table_line"
          @click="goPage(item)"
        >
          <div class="Label">{{ item.typeo | formatTEXT }}</div>
          <div>
            <div class="table_line_text">
              {{ item.title }}
            </div>
            <div class="table_line_time">
              <Icon size="26" type="md-time" style="margin-right: 10px" />
              {{ item.modifiedTime || item.createdTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_box">
      <Page
        class="page_style"
        :total="total"
        :current="rencaixiangmuParams.pageNum"
        :page-size="rencaixiangmuParams.pageSize"
        @on-prev="PageChange"
        @on-next="PageChange"
        @on-change="PageChange"
        @on-page-size-change="pageSizeChange"
      />
      <!-- show-total
        show-elevator
        show-sizer -->
    </div>
  </div>
</template>
<script>
import axios from "axios";
let moment = require("moment");
export default {
  name: "tabsTablelist",
  //   props: {
  //     data: {
  //       type: Object,
  //       default: function() {
  //         return {};
  //       },
  //     },
  //   },
  data() {
    return {
      total: 0,
      current: 0,
      tabslist: [
        { name: "全部", value: "" },
        { name: "国家级人才", value: "0_0" },
        { name: "省部级人才", value: "0_1" },
        { name: "校级人才", value: "0_2" },
        { name: "其他人才", value: "0_3" },
      ],
      rencaixiangmuParams: {
        articleType: 0,
        pageNum: 1,
        pageSize: 15,
      },
      rencaixiangmuList: [],
    };
  },
  filters: {
    formatTEXT: function (value) {
      let arry = [
        { name: "全部", value: " " },
        { name: "国家级人才", value: "0_0" },
        { name: "省部级人才", value: "0_1" },
        { name: "校级人才", value: "0_2" },
        { name: "其他人才", value: "0_3" },
      ];
      let data = arry.find((item) => {
        return item.value == value;
      });
      return data.name;
    },
  },
  mounted() {
    this.rencaixiangmuFUN();
  },
  methods: {
    goPage(item) {
      window.open(
        "https://www.diantangkeji.com/#/detailspage?id=" + item.id,
        "_blank"
      );
    },
    tabsChang(index, item) {
      this.current = index;
      this.rencaixiangmuParams.typeo = item.value;
      if (item.value == "") {
        delete this.rencaixiangmuParams.typeo;
      }
      this.pageNum = 1;
      this.rencaixiangmuFUN();
    },
    PageChange(v) {
      this.rencaixiangmuParams.pageNum = v;
      this.rencaixiangmuFUN();
    },
    pageSizeChange(v) {
      this.rencaixiangmuParams.pageSize = v;
      this.rencaixiangmuFUN();
    },
    rencaixiangmuFUN() {
      axios
        .post(`/textcontent/search`, this.rencaixiangmuParams)
        .then((res) => {
          let { code, message, result } = res;
          if (code == "ok") {
            this.rencaixiangmuList = result.data.map((item) => {
              item.createdTime = moment(item.createdTime).format("YYYY-MM-DD");
              item.modifiedTime = item.modifiedTime
                ? moment(item.modifiedTime).format("YYYY-MM-DD")
                : "";
              return item;
            });
            this.total = result.total;
          } else {
          }
        });
    },
  },
};
</script>

<style scoped>
.box {
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid #ffffff;
  width: 1920px;
  /* height: 1579px; */
  /* 其他样式设置，比如背景尺寸、重复等 */
  background-size: cover; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  background: #ffffff;
}
.tabs_box {
  margin: 0 auto;
  margin-top: 63px;
  width: 1302px;
  height: 70px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  padding: 0 30px;
}
.tabs_box_item {
  cursor: pointer;
  margin-right: 85px;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 400;
  font-size: 26px;
  color: #000000;
  white-space: nowrap;
}
.tabs_box_item_color {
  cursor: pointer;
  margin-right: 85px;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 400;
  font-size: 26px;
  color: #000000;
  white-space: nowrap;
  font-weight: bold;
  color: #0365fe;
}
.table {
  margin: 78px auto 60px;
  width: 1304px;
  /* height: 1042px; */
  min-height: 500px;
  max-height: 2150px;
}
/* .table_line_box {
  width: 1280px;
  height: 132px;
} */
.table_line {
  margin-bottom: 12px;
  height: 132px;
  border-bottom: 2px solid #dcdcdc;
  display: flex;
}
.Label {
  width: 130px;
  height: 40px;
  background: #0365fe;
  border-radius: 2px;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  margin-right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table_line_text {
  cursor: pointer;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 26px;
  color: #1e1e1e;
  text-align: left;
  margin-bottom: 22px;
}
.table_line_text:hover {
  cursor: pointer;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 26px;
  color: #0365fe;
  text-align: left;
  margin-bottom: 22px;
}
.table_line_time {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-size: 24px;
  color: #c9c9c9;
}
.page_box {
  margin-top: 170px;
  height: 78px;
  transform: scale(1.5);
}
.page_style {
  text-align: center;
}
</style>
